<template>
  <div>
	  <div>
      <div style="margin:2% 0;display: inline-block;">
        <span>用户id：</span>
        <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入用户id" v-model="userId"></el-input>
        <span>陪玩id:</span>
        <el-input style="width: 150px;" @keydown.enter.native="select" clearable placeholder="请输入陪玩id" v-model="playerId"></el-input>
        <span>等级:</span>
        <el-select v-model="level" placeholder="请选择等级" style="width:150px;" @change="selectTrigger(sort)">
          <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
	  </div>
	  <el-table
		v-loading="tableDataLoading"
	    :data="tableData.content"
		row-key="id">
	    <el-table-column
	  	 prop="id"
	  	 label="编号"
	  	 width="80">
	     </el-table-column>
	    <el-table-column
	  	 prop="userId"
	  	 label="用户ID">
	     </el-table-column>
	    <el-table-column
	  	 prop="playerId"
	  	 label="陪玩ID">
	     </el-table-column>
	    <el-table-column
	  	 prop="orderId"
	  	 label="订单ID">
	     </el-table-column>
      <el-table-column prop="level" label="等级">
        <template slot-scope="scope">
          <span>{{scope.row.level | levelFormat}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="evalvation" label="评价">
        <template slot-scope="scope">
          <span>{{scope.row.evalvation ? scope.row.evalvation : ''}}</span>
        </template>
      </el-table-column>

      <el-table-column prop="type" label="评价类型">
        <template slot-scope="scope">
          <span>{{scope.row.type}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间">
      </el-table-column>
	    <el-table-column
	      label="操作"
        align="center"
        fixed="right">
	      <template slot-scope="scope">
	        <el-button
	          size="mini"
	          type="danger"
			   :disabled="!isAuth('playWithEvaluation:delete')"
	          @click="deletes(scope.row)">删除
	        </el-button>
	      </template>
	    </el-table-column>
	  </el-table>
	  <div style="text-align: center;margin-top: 10px;">
	    <el-pagination
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :page-sizes="[5, 10, 15, 20]"
	      :page-size="size"
	      :current-page="page"
	      layout="total,sizes, prev, pager, next"
	      :total="tableData.totalElements">
	    </el-pagination>
	  </div>
  </div>
</template>

<script>
  const level = [
    {
      label: '非常满意',
      value: 1
    },
    {
      label: '满意',
      value: 2
    },
    {
      label: '一般',
      value: 3
    },
    {
      label: '不满意',
      value: 4
    },
  ]
	export default {
	    data() {
	      return {
				size:5,
				page:1,
        userId: null,
        playerId: null,
        level: null,
        levelOptions: level,
				tableDataLoading:false,
        tableData:{
          content: []
        },
			}
		},
    filters: {
      levelFormat(value){
        if(!value) return ''
        return level[value*1-1].label
      },
    },
		methods: {
      // select自动选择
      selectTrigger() {
        this.dataSelect()
      },
      // 查询
      select() {
        this.page = 1
        this.size = 5
        this.dataSelect()
      },
			handleSizeChange (val) {
			  this.size = val
			  this.dataSelect()
			},
			handleCurrentChange (val) {
			  this.page = val
			  this.dataSelect()
			},
			// 删除分类
			deletes(row){
				this.$confirm(`确定删除此条评论?`, '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
          this.$http({
            url: this.$http.adornUrl2('/player/deleteEvaluation'),
            method: 'get',
            params: this.$http.adornParams({
              'id':row.id
            })
          }).then(({data}) => {
            if(data.status == 0){
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.dataSelect()
                }
              })
            }else{
              this.$message({
                message: data.msg,
                duration: 1500
              })
            }
          })
        }).catch(() => {})
			},
      // 获取数据
      dataSelect () {
        let page = this.page - 1
        this.tableDataLoading = true
        this.$http({
          url: this.$http.adornUrl2('/player/findAllEvaluation'),
          method: 'get',
          params: this.$http.adornParams({
            'page':page,
            'size':this.size,
            // 'results':this.results,
            // 'userId':this.userId,
            // 'area':this.area,
          })
        }).then(({data}) => {
          this.tableDataLoading = false
          // console.log(data)
          this.tableData = data.data || {content: []};
        })
      }
		},
    mounted() {
      this.dataSelect()
    }
	  };
</script>

<style>

</style>
